<template>
  <div>
    <div class="one">
      <div class="two">
        <el-input
          v-model="input"
          placeholder="搜索"
          class="text"
          @blur="soso"
        ></el-input>
      </div>

      <div class="three" @click="back">取消</div>
    </div>
    <div>
      <div class="history">
        <div class="past">历史搜索</div>
        <div class="recodrs">
          <div class="val">无搜索记录</div>
        </div>
      </div>
      <div class="new">
        <div class="pasts">大家都在搜</div>
        <div class="recodrss">
          <div class="vals">旅游胜地</div>
          <div class="vals">美食</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      input: ""
    };
  },
  methods: {
    back() {
      this.$router.push({
        path: "/"
      });
    },
    soso() {
      let that = this;
      this.$axios
        .get("/search", {
          params: {
            name: that.input
          }
        })
        .then(function(response) {
          console.log(response.data.res);
          that.$router.push({
            path: "/show",
            query: {
              response: response.data
            }
          });
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>
<style>
.one {
  width: 100%;
  height: 50px;
  background: red;
  display: flex;
  flex-direction: row;
}
.two {
  width: 70%;
  height: 40px;
  margin: 10px;
}
.text {
  width: 70%;
  height: 30px;
}
.three {
  width: 30%;
  height: 40px;
  font-size: 20px;
  margin-top: 10px;
}
.history {
  width: 100%;
  height: 200px;
}
.past {
  width: 100%;
  height: 50px;
  text-align: left;
  font-size: 22px;
  color: lightgray;
  line-height: 50px;
}

.recodrs {
  width: 100%;
  height: 150px;
  border: 1px solid black;
}
.val {
  width: 30%;
  height: 40px;
  margin-left: 10px;
  margin-top: 10px;
  margin-right: 10px;
  line-height: 40px;
}
.new {
  width: 100%;
  height: 200px;
}
.pasts {
  width: 100%;
  height: 50px;
  text-align: left;
  font-size: 22px;
  color: lightgray;
  line-height: 50px;
}

.recodrss {
  width: 100%;
  height: 150px;
  border: 1px solid black;
}
.vals {
  width: 30%;
  height: 40px;
  margin-left: 10px;
  margin-top: 10px;
  margin-right: 10px;
  line-height: 40px;
}
</style>
